<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="author" content="wangbo" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>伪元素</title>

		<style>
      .fu{
        width: 800px;
        background-color: seagreen;
      }
			/* 属性选择器,浮动的后果,容易造成空间塌陷 (所有子类都脱离了父类)
      父类也就没有高了
      */
      div[class*='son'] {
        float: left;
        width: 200px;
        height: 200px;
        background-color: salmon;
        margin-right: 5px;
			}
      .clearfix{
        clear: both;
      }
      /* .fu{
        overflow: hidden;
      } */
      /* 生成的伪元素是行内元素 */
      .fu::after{
        /* 转化成块元素 */
        display: block;
        content: "";         
        height: 0;
        /* 不让看到元素 */
        visibility: hidden;       
        clear: both;
      }
		</style>
	</head>
	<body>
    <!-- 清除浮动 让父元素可以检测到子类的高度 -->
		<!-- 将html页面中一些重复,简单,去掉头,或者是尾的标签,只能去一个 -->
		<!-- 伪元素清除浮动
    清除浮动的4种方式 
    1. 额外标签发,每个浮动清除的时候,很多额外的并且没有用的标签
    2. 父类添加voerflow 
    3.伪元素法
    4. 双伪元素法
    -->
		<div class="fu">

			<div class="son1">我是div1</div>
			<div class="son2">我是div2</div>
			<div class="son3">我是div3</div>
      <!-- 额外标签法,这个标签必须是块,p,div ,ul,li,ol,br
      行内元素无法生效
      -->
      <!-- <br class="clearfix" /> -->
		</div>
	</body>
</html>
